<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="padding: 20px">
    <el-form-item prop="username">
        <el-input v-model="ruleForm.username" maxlength="11" placeholder="用户名手机号"></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
        <el-input v-model="ruleForm.captcha" placeholder="验证码" > <template slot="append"><span @click="SendVerificationCode">获取验证码</span></template> </el-input>  
    </el-form-item>
    <el-form-item prop="nickname">
        <el-input v-model="ruleForm.nickname" placeholder="你的名字" type="text"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
      const password = (rule, value, callback) => {
        if(value == ''){
          callback(new Error('请输入密码'))
        }else{
          if(this.ruleForm.checkPass != ''){
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username:'15011969095',
          checkPass: '',
          password:'',
          captcha:'',
          nickname:''
        },
        rules: {
          nickname: [{ message: '请输入你的名字', required: true}],
          captcha: [{ message: '请输入验证码', required: true, }],
          username: [{ message: '手机号11位', required: true },{ pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }],
          password: [{ validator: password, trigger: 'blur' }],
          checkPass: [{ validator: validatePass, trigger: 'blur' }],
        }
      };
    },
    methods: {
      submitForm(ruleForm) {  //点击注册
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid);
          if (valid) {
            console.log(this.ruleForm);
            const {checkPass, ...props} = this.ruleForm  //结构 只要对应的值
            this.$axios.post('/accounts/register',props)
            .then(res=>{
                console.log(res);
                this.$router.push('/user/login')
            })
          } else {
            this.$message.error('请输入完整的信息')
            return false;
          }
        });
      },
      resetForm(formName) {  //重置
        this.$refs[formName].resetFields();
      },
      SendVerificationCode() {  //发送验证按钮
        if(!this.ruleForm.username){
            this.$confirm('请输入手机号','提示',{
                confirmButtonText: '确认',
                showCancelButton: false,
                type: 'warning'
            })
            return
        }
        if(this.ruleForm.username.length != 11){
            this.$confirm('请输入11位手机号','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            return
        }
        const data = {tel:this.ruleForm.username}
        this.$axios.post('/captchas',data)
        .then(res=>{
            this.$confirm('模拟收到的验证是' + res.data.code, '信息',{
                cancelButtonText: '好的',
                confirmButtonText: '确定',
                type: 'info' 
            }).catch(okay=>{
                //console.log(res);
                this.ruleForm.captcha = res.data.code
            })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
</style>